<template>
    <div>
        <headers />
        <div class="hei">
              <div class="top-img-box">
            <img title="恒逸金榈湾85平中式古典三居室" alt="恒逸金榈湾85平中式古典三居室" src="http://img.sirfang.com/effect_img/2020/10/19/7069485c44ab053c95bc3dd861634ddb.jpg" class="lazy">
        </div>
        <div class="dian">
        <ul>
            <li>
            <span><span class="xian"></span><i class="yuan"></i><span class="xian"></span></span>
            <p class="li-p">
                <span>厨房</span><br>
                <span>（0）</span>
            </p>
            </li>
              <li>
            <span><span class="xian"></span><i class="yuan"></i><span class="xian"></span></span>
            <p class="li-p">
                <span>厨房</span><br>
                <span>（0）</span>
            </p>
            </li>  <li>
            <span><span class="xian"></span><i class="yuan"></i><span class="xian"></span></span>
            <p class="li-p">
                <span>厨房</span><br>
                <span>（0）</span>
            </p>
            </li>  <li>
            <span><span class="xian"></span><i class="yuan"></i><span class="xian"></span></span>
            <p class="li-p">
                <span>厨房</span><br>
                <span>（0）</span>
            </p>
            </li><li>
            <span><span class="xian"></span><i class="yuan"></i><span class="xian"></span></span>
            <p class="li-p">
                <span>厨房</span><br>
                <span>（0）</span>
            </p>
            </li><li>
            <span><span class="xian"></span><i class="yuan active"></i><span class="xian"></span></span>
            <p class="li-p">
                <span>厨房</span><br>
                <span>（0）</span>
            </p>
            </li>
        </ul>
        </div>
        <p class="da"><b>设计诠释:</b>恒逸金榈湾85平中式古典三居室</p>
        </div>
        <bottom />
        </div>
</template>
<script>
import headers from "@/components/myHeader.vue"
import bottom  from "@/components/Bottoms.vue"
export default {
  data() {
    return {};
  },
  components:{
      headers,
      bottom
  }
};
</script>
<style lang="scss" scoped>
.active{
    background-color: #22bbbb;
}
.da{
    color: whitesmoke;
    float: right;
}
.hei{
    color: whitesmoke;
    height: 500px;
    margin-top: 60px;
    background-color: black;
    width: 100%;
    overflow: hidden;
    .top-img-box{
        margin-top: 90px;
    }

}
.top-img-box{
    width: 100%;
    height: 200px;
    img{
        width: 100%;
        height: 100%;
    }
}
.dian{
    height: 90px;
    
}
ul{
    width: 100%;
    margin-top: 10px;
    height: 90px;
    display: flex;
    li{
        width: 20%;
        margin: 0;padding: 0;
        text-align: center;
        flex: 1;
    //     height: 90px;
    // cursor: pointer;
    // text-align: center;
    // float: left;
    // font-size: 14px;
    // color: #fff;
    // position: relative;
        height: 100px;
        .li-p{
            text-align: center;
            margin: 0;padding: 0;
        }
        span{
            width: 100px;
            height: 100px;
            .xian{
                display: inline-block;
                height: 2px;
                width: 32%;
                margin-bottom: 10px;                
                background-color: #22bbbb;
            }
            .yuan{
               width: 20px;
               border-radius: 50%;
               height: 20px;
               display: inline-block;
         //    background-color: #2bb281;
               border: 1px solid #22bbbb,
    }
        }
    }
}
</style>
